<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1.事件的基本使用</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
    事件的基本使用:
    1.使用v-on:xxx 或 @xxx 绑定事件 , xxx是事件名
    2.事件的回调需要配置在methods对象中,最终会在vm上
    3.methods中配置的函数,不要用箭头函数!否则this就不是vm了
    4.methods中配置的函数,都是被Vue管理的函数,this指向是vm 或 组件实例对象
    5.@click="demo" 和 @click="demo($event) 效果一样, 但后者可以传参
-->
<div id="root">
    <h2>一起学习前端吧{{name}}</h2>
<!--    <button v-on:click="showInfo">点我提示信息</button>-->
    <button @click="showInfo1">点我提示信息1(不传参)</button>
    <button @click="showInfo2(66,$event)">点我提示信息2(传参)</button>
</div>
</body>
<script type="text/javascript">
    const vm = new Vue({
        el: "#root",
        data: {
            name: "张桂杰"
        },
        methods: {
            showInfo1(event) {
                //事件目标 的 文本
                // console.log(event.target.innerText)

                console.log(this) //此处的this是vm
                console.log(this===vm)
                alert("欢迎学习Vue")
            },
            showInfo2(event,number) {
                //事件目标 的 文本
                console.log(event,number)
                alert("欢迎学习Vue")
            }
        }
    })
</script>
</html>